<template>
	<view class="p-20 border-box">
		<u-navbar title="重置支付密码" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#1D1D20" class="navBarHeight" />
		<view class="p-20 radius-10 text-black0 bg-white">
			<view class="flex align-center item-bg radius-6">
				<view class="font-28 text-bold margin-right label-w">手机号码</view>
				<view class="flex-grow">
					<input class="font-28" placeholder="请输入手机号码" maxlength="11" v-model="mobile" />
				</view>
			</view>

			<view class="flex align-center item-bg radius-6">
				<view class="font-28 text-bold margin-right label-w">新支付密码</view>
				<view class="flex-grow">
					<input class="font-28" placeholder="请输入6位数支付密码" maxlength="6" minlength="6" v-model="pwd" />
				</view>
			</view>
			<view class="flex align-center item-bg radius-6">
				<view class="font-28 text-bold margin-right label-w">确认支付密码</view>
				<view class="flex-grow">
					<input class="font-28" placeholder="请输入6位数确认支付密码" maxlength="6" minlength="6" v-model="confirmPwd" />
				</view>
			</view>

			<!-- <view class="flex align-center item-bg radius-6">
				<view class="text-bold margin-right label-w">验证码</view>
				<view class="flex-grow">
					<input placeholder="请输入验证码" maxlength="6" v-model="code"/>
				</view>
				<view class="text-theme text-bold" style="width: 136rpx;" @click="onCode" v-if="show">发送验证码</view>
				<view class="text-black9 text-bold" style="width: 240rpx;" v-else>获取验证码（{{count}}）</view>
			</view> -->

			<view class="btn" @click="submit">确定</view>
		</view>

	</view>
</template>

<script>
import {
    newSendCode, payCipher
} from '@/common/api/api.js'
import {
    customerInfo,
    forgetCipher
} from '@/common/api/customer.js'
	export default {
		data() {
			return {
				pwd: '',
				confirmPwd: '',
				code: '',
				show: true,
				count: 0,
				mobile: '',
				password: '',
				reg: /^[0-9A-Za-z]{6,12}$/,
			};
		},
		onLoad() {
				this.mobile = this.$store.state.user.userInfo.mobile
		},
		methods: {
			// onCode() {
			// 	if (!this.mobile) {
			// 		return this.$msg('请输入手机号码')
			// 	}
			// 	if (this.mobile.length != 11) {
			// 		return this.$msg('请输入11位手机号码')
			// 	}
			// 	newSendCode({
			// 		mobile: this.mobile,
			// 		type: 6,
			// 	}).then(res => {
			// 		if (res.code == 200) {
			// 			this.time()
			// 			this.$msg(res.msg)
			// 		} else {
			// 			this.$msg(res.msg)
			// 		}
			// 	})
			// },
			// time() {
			// 	const TIME_COUNT = 60
			// 	if (!this.timer) {
			// 		this.count = TIME_COUNT
			// 		this.show = false
			// 		this.timer = setInterval(() => {
			// 			if (this.count > 0 && this.count <= TIME_COUNT) {
			// 				this.count--
			// 			} else {
			// 				this.show = true
			// 				clearInterval(this.timer)
			// 				this.timer = null
			// 			}
			// 		}, 1000)
			// 	}
			// },
			submit() {
				if (!this.mobile) {
					return this.$msg('请输入手机号码')
				}
				if (this.mobile.length != 11) {
					return this.$msg('请输入11位手机号码')
				}
				if(!this.pwd) {
						return this.$msg('请输入6位数支付密码')
				}
				if(this.pwd.length!=6) {
						return this.$msg('请输入6位数支付密码')
				}
				if(!this.confirmPwd) {
						return this.$msg('请输入确认6位数支付密码')
				}
				if(this.pwd !== this.confirmPwd) {
						return this.$msg('两次输入支付密码不一致')
				}
				// if (!this.code) {
				// 	return this.$msg('请输入验证码')
				// }
				uni.showLoading({
					title: '修改中',
					mask: false
				})
				payCipher({
					mobile: this.mobile,
					password: this.pwd,
					//code: this.code
				}).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						this.$msg('修改成功')
						customerInfo().then(res => {
								this.$store.commit('user/setUserInfo', res.data || {})
								uni.navigateBack()
						})
					} else {
						this.$msg(res.msg)
					}
				}).catch(err=> {
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	::v-deep .uni-input-placeholder {
		font-size: 28rpx !important;
	}

	.label-w {
		width: 200rpx;
	}

	.item-bg {
		padding: 24rpx 0;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.icon-size {
		width: 36rpx;
		height: 36rpx;
		margin-right: 20rpx;
	}

	.btn {
		width: 100%;
		height: 84rpx;
		margin: 60rpx auto 30rpx auto;
		border-radius: 10rpx;
		background: #ECA52B;
		font-size: 28rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
